<template>
  <div class="box">
    <p>
      <input type="text" placeholder="用户名" v-model="state.user">
    </p>
    <p>
      <input type="password" placeholder="密码" v-model="state.pwd">  <!-- 密码框应该用 password 类型 -->
    </p>
    <p>
      <select v-model="state.role">
        <option :value="ele.value" v-for="ele in state.roleList" :key="ele.value">{{ ele.text }}</option>
      </select>
    </p>
    <p>
      <input type="button" value="登录" @click="doLogin"/>
    </p>
  </div>
</template>

<script setup>
import {reactive} from 'vue'
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'


const router = useRouter()
const store = useStore()
// 定义响应式数据
const state = reactive({
  user: "wupeiqi",
  pwd: "123",
  role: "user",
  roleList: [
    {text: "管理员", value: "admin"},
    {text: "经理", value: "manager"},
    {text: "用户", value: "user"},
  ],
})

// 登录方法
function doLogin() {
  //1.向后台发送请求且登录成功
  //2.返回信息
  const context = {
    routers: ["menu", "info", "more", "mine", "six", "admin", "role", "user", "table"],
    menus: [
      {
        id: 1,
        title: "权限管理",
        icon: "User",
        children: [
          {name: "menu", title: "菜单"},
          {name: "role", title: "角色"},
          {name: "user", title: "用户"},
        ]
      },
      {
        id: 2,
        title: "VIP中心",
        icon: "Box",
        children: [
          {name: "info", title: "陌陌"},
          {name: "table", title: "表格"},
        ]
      },
      {
        id: 3,
        title: "财务管理",
        icon: "Setting",
        children: [
          {name: "mine", title: "我的"},
          {name: "six", title: "溜溜"},
        ]
      }
    ],
    permissions: {
      "user": ["GET", "DELETE"],
      "order": ["GET", "POST", "put", "delete"],
      "order-detail": ["GET", "PUT", "DELETE"],
    },
    token: "fe4892c7-dc9d-4dae-a2f6-02f0c63ea752",
    role: state.role
  };
  //3.保存vuex
  store.commit("login", context)
  //4.跳转后台
  router.replace({"name": "admin"})
}
</script>

<style scoped>
.box {
  border: 1px solid #ddd;
  width: 300px;
  margin-top: 200px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px;
}
</style>